<template>
	<div id="app">
		<table class="tb">
			<tr>
				<th>编号</th>
				<th>品牌名称</th>
				<th>创立时间</th>
				<th>操作</th>
			</tr>
			<!-- 循环渲染的元素tr -->
			<tr v-for="(item, index) in list" :key="index">
				<td>{{ item.id }}</td>
				<td>{{ item.name }}</td>
				<td v-text="item.time"></td>
				<td>
					<button @click="list.splice(index, 1)">删除</button>
				</td>
			</tr>
			<!-- 这行tr跟list里面是否元素相关 -->
			<!-- 显示条件：list里面不存在元素 -->
			<tr v-show="list.length === 0">
				<td colspan="4">没有数据咯~</td>
			</tr>
		</table>
	</div>
</template>

<script setup>
	import {
		reactive
	} from 'vue'
	const list = reactive([
		{
			id: 1,
			name: "奔驰",
			time: "2020-08-01"
		},
		{
			id: 2,
			name: "宝马",
			time: "2020-08-02"
		},
		{
			id: 3,
			name: "奥迪",
			time: "2020-08-03"
		},
	])
</script>

<style scoped>
	#app {
		width: 600px;
		margin: 10px auto;
	}

	.tb {
		border-collapse: collapse;
		width: 100%;
	}

	.tb th {
		background-color: #0094ff;
		color: white;
	}

	.tb td,
	.tb th {
		padding: 5px;
		border: 1px solid black;
		text-align: center;
	}

	.add {
		padding: 5px;
		border: 1px solid black;
		margin-bottom: 10px;
	}
</style>